<template>
  <section class="toolbar">
    <div class="item">
      <span><i class="el-icon-upload icon"></i>部署</span>
    </div>
    <el-tooltip
      class="item"
      effect="light"
      content="运行本实验"
      placement="top"
    >
      <span><i class="el-icon-video-play icon"></i>运行</span>
    </el-tooltip>
  </section>
</template>

<script>
export default {
  name: 'BottomToolbar',
}
</script>

<style lang="less" scoped>
.toolbar {
  width: 100%;
  height: 100%;

  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;

  .item {
    height: 100%;
    font-size: 14px;
    margin: 0 2px;
    padding: 2px 8px;
    cursor: pointer;

    display: flex;
    align-items: center;

    .icon {
      font-size: 18px;
    }

    &:hover {
      color: #1890ff;
    }
  }
}
</style>
